﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../scripts/boot.js" type="text/javascript"></script>
</head>
<body>
    
     <h1>跨域加载表格数据</h1>      

<div id="datagrid1" class="mini-datagrid" style="width:800px;height:300px;" 
    url="../data/AjaxService.jsp?method=SearchEmployeesByJsonP"  idField="id" allowResize="true"   
	ajaxOptions='{dataType:"jsonp",jsonp:"jsoncallback"}' 
>
    <div property="columns">
        <div type="indexcolumn" ></div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    
        <div field="name" width="120" headerAlign="center" allowSort="true" showCellTip="false">姓名</div>                            
        <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
        <div field="salary" numberFormat="¥#,0.00" align="right" width="100" allowSort="true">薪资</div>                                
        <div field="age" width="100" allowSort="true" decimalPlaces="2" dataType="float">年龄</div>
        <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>                
    </div>
</div>   

    <div class="description">
        <h3>Description</h3>
        <ol>
            <li>前台需要ajaxOptions='{dataType:"jsonp",jsonp:"jsoncallback"}' 配置。</li>
            <li>后台需要处理代码：<br />
string jsoncallback = Request["jsoncallback"];<br />
Response.Write(jsoncallback + '(' + json + ')');            
            </li>
        </ol>      
    </div>

</body>
</html>


<script type="text/javascript">
    mini.parse();
    var grid = mini.get("datagrid1");
    grid.load();
    

</script>
